<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html;charset=UTF-8" encoding="UTF-8">
    <h:head>

    </h:head>

    <h:body>

        <h:form id="form">
            <p:selectCheckboxMenu id="checkbox-menu" value="#{selectChecboxMenu001.selectedCities}" label="Cities"
                style="width: 15rem" filter="true" filterMatchMode="startsWith" panelStyle="width: 15rem"
                scrollHeight="250" selectedLabel="Item(s) Selected" updateLabel="true">
                <f:selectItems value="#{selectChecboxMenu001.cities}" />
            </p:selectCheckboxMenu>

            <p:commandButton id="button" update="@form" value="Submit" />
        </h:form>

    </h:body>
</f:view>

</html>